<template>
  <div class="loginBgImage">
    <div class="loginBox">
      <div class="loginBoxTitle">用户登录</div>
      <div>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          hide-required-asterisk
        >
          <el-form-item prop="username">
            <el-input
              type="text"
              v-model="ruleForm.username"
              placeholder="请输入用户名"
            >
              <i slot="prefix" class="el-input__icon el-icon-user"></i>
            </el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input
              type="password"
              v-model="ruleForm.password"
              placeholder="请输入密码"
            >
              <i slot="prefix" class="el-input__icon el-icon-lock"></i>
            </el-input>
          </el-form-item>
          <el-button class="loginButton" @click="submitForm()">登录</el-button>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import {
  SetCookie,
  GetCookie,
  RemoveCookie
} from "@/config/config";
import { loginPort} from "@/api/login";
export default {
  name: "login",

  data() {
    return {
      isLogin: false,
      ruleForm: {
        username: "",
        password: "",
      },
      rules: {
        username: [
          { required: true, message: "请输入用户名", trigger: "blur" },
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
      },
    };
  },
  mounted(){
    let _self=this;
      document.onkeydown = function(e){
      if(e.keyCode == "13"){
        _self.submitForm()
      }
    }
  },
  destroyed(){
    document.onkeydown = null;
  },
  methods: {
    async submitForm() {
      let _self = this;
      let { username, password } = _self.ruleForm;
      let data = {
        username,
        password,
      };
      await loginPort(data).then((res) => {
        if (res.code == 20000) {
          SetCookie("token", res.data.token);
          _self.isLogin = true;
        }
      });
      if (_self.isLogin) {
        _self.$message({
          message: "登陆成功",
          type: "success",
        });
        _self.$router.push({
          name: "home",
        });
      }
    },
  },
};
</script>
<style>
.loginBgImage {
  position: fixed;
  display: flex;
  width: 100%;
  height: 100%;
  min-width: 400px;
  min-height: 351px;
  align-items: center;
  justify-content: center;
  background: url("../../assets/loginBg.png") no-repeat;
  background-size: 100% 100%;
}
.loginBox {
  padding: 20px;
  width: 400px;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  box-sizing: border-box;
  box-shadow: 0px 0px 5px gray;
}
.loginBoxTitle {
  line-height: 20px;
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}
.loginButton {
  display: inline-block;
  width: 360px;
}
.loginCheck {
  display: inline-block;
  margin-bottom: 20px;
}
</style>
